<!-- 模板 -->
<template>
  <div>
    <main>
      <!-- 视频区 -->
      <div class="video">
        <video :poster="video">
          <source :src="video" />
        </video>
        <div class="top">
          <i @click="back()" class="back iconfont left-icon"></i>
          <div class="multiple">
            <van-dropdown-menu active-color="#fff">
              <van-dropdown-item v-model="multiple.value" :options="multiple.option" />
            </van-dropdown-menu>
          </div>
        </div>
        <div class="playAuto">
          <div class="playBtn" @click="playAuto()">
            <i :class="auto === 'stop' ? 'iconfont play-btn' : 'iconfont stop-btn'"></i>
          </div>
          <div class="playtime">
            {{
              playValue > 60
                ? parseInt(playValue / 60) +
                  ':' +
                  (playValue - parseInt(playValue / 60) * 60 > 9
                    ? playValue - parseInt(playValue / 60) * 60
                    : '0' + (playValue - parseInt(playValue / 60) * 60))
                : 0 + ':' + (playValue > 9 ? playValue : '0' + playValue)
            }}
          </div>
          <van-slider
            v-model="playValue"
            bar-height="4px"
            inactive-color="#9078BA"
            button-size="0.3rem"
            active-color="#DED5E7"
            :max="totalTime"
            :min="0"
          />
          <div class="totaltime">
            {{
              totalTime > 60
                ? parseInt(totalTime / 60) +
                  ':' +
                  (totalTime - parseInt(totalTime / 60) * 60 > 9
                    ? totalTime - parseInt(totalTime / 60) * 60
                    : '0' + (totalTime - parseInt(totalTime / 60) * 60))
                : 0 + ':' + (totalTime > 9 ? totalTime : '0' + totalTime)
            }}
          </div>
          <div class="fullScreen">
            <i class="iconfont icon-fll"></i>
          </div>
        </div>
      </div>
      <!-- 详情说明区 -->
      <div class="detail">
        <div class="course-des">
          <div class="tit">{{ courseDes.desTit }}</div>
          <div class="content">{{ courseDes.desContent }}</div>
          <div class="courseData">
            <div class="co-time">共{{ courseDes.totalCoTime }}课时</div>
            <span>|</span>
            <div class="population">已有{{ courseDes.population }}人学过</div>
          </div>
        </div>
        <div class="grade">
          <div class="wrap">
            <div class="core">{{ courseDes.grade }}</div>
            <div>评分</div>
          </div>
        </div>
      </div>
      <!-- 切换栏 -->
      <div class="tab">
        <a
          href="##"
          v-for="(item, index) in nav"
          :class="index === activeIndex ? 'active' : ''"
          :key="item.id"
          @click="toComp(item.path, index)"
        >
          <div>
            <span>{{ item.name }}</span>
          </div>
          <div class="actives"></div>
        </a>
      </div>
      <div class="contentRouter">
        <!-- 子组件传值 -->
        <router-view @index2="getIndex2" @index1="getIndex"></router-view>
      </div>
    </main>
  </div>
</template>
<script>
// import request from '../utils/request.js'
import video from '../assets/img/detailBG.png'
export default {
  name: '',
  data() {
    return {
      activeIndex: 0,
      nav: [
        {
          id: 1,
          name: '课程介绍',
          path: '/detailCourse',
        },
        {
          id: 2,
          name: '课程目录',
          path: '/contents',
        },
        {
          id: 3,
          name: '往期评价',
          path: '/evaluate',
        },
      ],
      video,
      playValue: 0,
      totalTime: 16.5 * 60,
      auto: 'play',
      playId: 0,
      courseDes: {
        desTit: '四六级英语火箭班',
        desContent: '精准定位数学解析真题常考语法,名师逐个分析考点，科学有效备考。',
        totalCoTime: 26,
        population: 4681,
        grade: 4.9,
      },
      multiple: {
        option: [
          { text: '1.0x', value: 0 },
          { text: '1.5x', value: 1 },
          { text: '2.0x', value: 2 },
        ],
        value: 0,
      },
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    //目录组件传的值,控制播放和进度条
    getIndex2(index, play) {
      this.activeIndex = index
      if (this.auto === 'stop') {
        this.auto = play.auto
        this.startAdd()
      }
      this.playValue = play.value
    },
    //其他子组件穿的值用来判断tab选中哪个
    getIndex(index) {
      if (index) {
        this.activeIndex = index
      }
    },
    //返回上页
    back() {
      this.$router.go(-1)
    },
    //切换页面
    toComp(path, index) {
      this.activeIndex = index
      this.$router.push({ path: path, query: { courseDes: this.courseDes, playValue: this.playValue } })
    },
    //进度条前进
    timeAdd() {
      if (this.playValue === this.totalTime) {
        this.auto = 'stop'
        this.playValue = 0
        return clearInterval(this.playId)
      }
      this.playValue++
    },
    //点击控制播放和暂停
    playAuto() {
      this.auto === 'play' ? (this.auto = 'stop') : (this.auto = 'play')
      this.startAdd()
    },
    //开始播放
    startAdd() {
      if (this.auto === 'play') {
        if (!this.playId) {
          clearInterval(this.playId)
        }
        this.playId = setInterval(this.timeAdd, 1000)
      } else {
        clearInterval(this.playId)
      }
    },
  },
  created() {},
  //离开页面前销毁定时器
  beforeDestroy() {
    clearInterval(this.playId)
  },
  mounted() {
    this.startAdd()
  },
}
</script>
<style lang="less" scoped>
// @import url(); 引入公共css类
main {
  font-size: 0.28rem;
  // 视频区
  .video {
    position: relative;
    video {
      width: 100%;
    }
    .top {
      position: absolute;
      width: 100%;
      top: 0;
      padding: 0.2rem 0.32rem;
      i {
        font-size: 0.28rem;
        color: rgb(226, 226, 226);
      }
      display: flex;
      justify-content: space-between;
      & /deep/ .van-dropdown-menu__title--down::after,
      & /deep/ .van-dropdown-menu__title::after,
      & /deep/ .van-icon,
      & /deep/ .van-overlay,
      & /deep/ .van-cell__value {
        display: none;
      }
      & /deep/ .van-popup--top {
        width: auto;
        left: auto;
        right: 0;
        top: 0;
      }
      & /deep/ .van-dropdown-menu__title {
        padding: 0;
        font-size: 0.28rem;
        line-height: inherit;
        border-radius: 0.05rem;
        border: 1px solid #fff;
        color: #fff;
        padding: 0.02rem;
        display: block;
        span {
          color: #fff;
        }
      }
      & /deep/ .van-dropdown-item--down {
        bottom: auto;
        height: 2.54rem;
        width: 1.2rem;
        left: auto;
        position: absolute;
      }
      & /deep/ .van-popup {
        background-color: initial;
        &::-webkit-scrollbar {
          display: none;
        }
      }
      & /deep/ .van-dropdown-menu__bar {
        background-color: initial;
        height: auto;
        box-shadow: none;
      }
      & /deep/ .van-cell {
        background-color: inherit;
        padding: 0 0.4rem;
        padding-top: 0;
        font-size: 0.28rem;
      }
      & /deep/ .van-cell::after {
        display: none;
      }
    }
    .playAuto {
      padding: 0 0.2rem;
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 0.3rem;
      width: 100%;
      color: #fff;
      font-size: 0.28rem;
      justify-content: space-between;
      i {
        font-size: 0.38rem;
      }
      .van-slider {
        width: 50%;
      }
    }
  }
  //详情区
  .detail {
    padding: 0.24rem 0.2rem;
    display: flex;
    width: 100%;
    align-items: center;
    .course-des {
      padding-right: 1.1rem;
      width: 88%;
      .tit {
        font-size: 0.32rem;
        color: #333;
      }
      .content {
        padding-top: 0.1rem;
        font-size: 0.28rem;
        color: #666;
      }
      .courseData {
        padding-top: 0.1rem;
        width: 100%;
        display: flex;
        color: #999;
        font-size: 0.24rem;
        .co-time {
        }
        span {
          width: 0.28rem;
          text-align: center;
        }
        .population {
        }
      }
    }
    .grade {
      text-align: right;
      width: 12%;
      font-size: 0.24rem;
      .wrap {
        border-left: 0.04rem solid #c4c4c4;
      }
      .core {
        font-size: 0.44rem;
        color: #fe231d;
        margin-bottom: 0.1rem;
      }
    }
  }
  //切换区
  .tab {
    padding: 0.24rem 0.2rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f5f5f5;
    a {
      flex: 1;
      text-align: center;
    }
    .active {
      position: relative;
      .actives {
        position: absolute;
        width: 20%;
        height: 0.05rem;
        border-radius: 1rem;
        background-color: #fc1e1e;
        bottom: -0.2rem;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .contentRouter {
    overflow: hidden;
  }
}
</style>
